<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item :label="translate('品类编码') + '：'">
        <div class="item">{{ form.CategoryCode }}</div>
      </el-form-item>
      <el-form-item :label="translate('品类名称') + '：'">
        <div class="item">{{ form.CategoryName }}</div>
      </el-form-item>
      <el-form-item :label="translate('3.0物料码') + '：'">
        <div class="item">{{ form.SysItemCode30 }}</div>
      </el-form-item>
      <el-form-item :label="translate('2.0物料码') + '：'">
        <div class="item">
          {{ form.SysItemCode20 }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('2.0品名') + '：'">
        <div class="item">{{ form.SysItemName20 }}</div>
      </el-form-item>
      <el-form-item :label="translate('2.0物料描述') + '：'">
        <div class="item">{{ form.SysItemRemark }}</div>
      </el-form-item>
      <el-form-item :label="translate('备注') + '：'">
        <div class="item">{{ form.Remark }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData">
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column :label="translate('大类')" prop="LCategory" />
      <el-table-column :label="translate('大类名称')" prop="LCategoryName" />
      <el-table-column :label="translate('中类')" prop="MCategory" />
      <el-table-column :label="translate('中类名称')" prop="MCategoryName" />
      <el-table-column :label="translate('小类')" prop="SCategory" />
      <el-table-column
        :label="translate('小类名称')"
        prop="SCategoryName"
      />
      <el-table-column :label="translate('品类编码')" prop="CategoryCode" />
      <el-table-column :label="translate('品类名称')" prop="CategoryName" />
      <el-table-column :label="translate('计量单位')" prop="BaseUnitCode" />
      <el-table-column :label="translate('计量单位描述')" prop="BaseUnitRemark" />
      <el-table-column :label="translate('拼接规则')" prop="ItemRule" />
      <el-table-column :label="translate('特性1编码')" prop="AttributeCode1" />
      <el-table-column :label="translate('特性1名称')" prop="AttributeName1" />
      <el-table-column :label="translate('特性-值1')" prop="AttributeValue1" />
      <el-table-column :label="translate('特性2编码')" prop="AttributeCode2" />
      <el-table-column :label="translate('特性2名称')" prop="AttributeName2" />
      <el-table-column :label="translate('特性-值2')" prop="AttributeValue2" />
      <el-table-column :label="translate('特性3编码')" prop="AttributeCode3" />
      <el-table-column :label="translate('特性3名称')" prop="AttributeName3" />
      <el-table-column :label="translate('特性-值3')" prop="AttributeValue3" />
      <el-table-column :label="translate('特性4编码')" prop="AttributeCode4" />
      <el-table-column :label="translate('特性4名称')" prop="AttributeName4" />
      <el-table-column :label="translate('特性-值4')" prop="AttributeValue4" />
      <el-table-column :label="translate('特性5编码')" prop="AttributeCode5" />
      <el-table-column :label="translate('特性5名称')" prop="AttributeName5" />
      <el-table-column :label="translate('特性-值5')" prop="AttributeValue5" />
      <el-table-column :label="translate('特性6编码')" prop="AttributeCode6" />
      <el-table-column :label="translate('特性6名称')" prop="AttributeName6" />
      <el-table-column :label="translate('特性-值6')" prop="AttributeValue6" />
      <el-table-column :label="translate('特性7编码')" prop="AttributeCode7" />
      <el-table-column :label="translate('特性7名称')" prop="AttributeName7" />
      <el-table-column :label="translate('特性-值7')" prop="AttributeValue7" />
      <el-table-column :label="translate('特性8编码')" prop="AttributeCode8" />
      <el-table-column :label="translate('特性8名称')" prop="AttributeName8" />
      <el-table-column :label="translate('特性-值8')" prop="AttributeValue8" />
      <el-table-column :label="translate('特性9编码')" prop="AttributeCode9" />
      <el-table-column :label="translate('特性9名称')" prop="AttributeName9" />
      <el-table-column :label="translate('特性-值9')" prop="AttributeValue9" />
      <el-table-column :label="translate('特性10编码')" prop="AttributeCode10" />
      <el-table-column :label="translate('特性10名称')" prop="AttributeName10" />
      <el-table-column :label="translate('特性-值10')" prop="AttributeValue10" />
      <el-table-column :label="translate('特性11编码')" prop="AttributeCode11" />
      <el-table-column :label="translate('特性11名称')" prop="AttributeName11" />
      <el-table-column :label="translate('特性-值11')" prop="AttributeValue11" />
      <el-table-column :label="translate('特性12编码')" prop="AttributeCode12" />
      <el-table-column :label="translate('特性12名称')" prop="AttributeName12" />
      <el-table-column :label="translate('特性-值12')" prop="AttributeValue12" />
      <el-table-column :label="translate('特性13编码')" prop="AttributeCode13" />
      <el-table-column :label="translate('特性13名称')" prop="AttributeName13" />
      <el-table-column :label="translate('特性-值13')" prop="AttributeValue13" />
      <el-table-column :label="translate('特性14编码')" prop="AttributeCode14" />
      <el-table-column :label="translate('特性14名称')" prop="AttributeName14" />
      <el-table-column :label="translate('特性-值14')" prop="AttributeValue14" />
      <el-table-column :label="translate('特性15编码')" prop="AttributeCode15" />
      <el-table-column :label="translate('特性15名称')" prop="AttributeName15" />
      <el-table-column :label="translate('特性-值15')" prop="AttributeValue15" />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ItemCodeApplyMasterDetail } from '@/api/form'
  import { translate } from '@/i18n'
  const props = defineProps<{
    id: string,
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const childData: any = ref([])
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 100,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id,
    }
    const data = await ItemCodeApplyMasterDetail(params)
    if(data.rows && data.rows.length>0) {
      data.rows.map((item,index) =>{
        item.childList = []
        if(data.extra && data.extra.length>0){
          data.extra.map(item1 => {
            if(item.ItemCode === item1.ItemCode) {
              item.childList.push(item1)
            }
          })
        }
      })
    }
    tableData.value = data.rows || []
    form.value = data.master || {}
    childData.value = data.extra || []

  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .colored {
      color: red;
    }
  }
</style>
